import React from 'react'

// setState()修改状态
class App1 extends React.Component {
    state = {
        age: 3
    }
    render() {
        return (
            <div>
                <button onClick={() => {
                    this.setState({
                        age: this.state.age + 1
                    })
                }}>更改数据</button>
                <p>{this.state.age}</p>
            </div>
        )
    }
}

// setState()修改状态方式二
// 箭头函数的方式
class App2 extends React.Component {
    state = {
        age: 3
    }
    addHandle() {
        this.setState({
            age: this.state.age + 1
        })
    }
    render() {
        return (
            <div>
                {/* 箭头函数的方式改变 this 执行 */}
                <button onClick={() => this.addHandle()}>更改数据</button>
                <p>{this.state.age}</p>
            </div>
        )
    }
}

// setState()修改状态方式三
// Function.prototype.bind() 
class App3 extends React.Component {
    constructor() {
        super()
        this.state = {
            age: 3
        }
        // 利用ES5中的bind方法，将事件处理程序中的this与组件实例绑定到一起
        this.addHandle = this.addHandle.bind(this)
    }
    addHandle() {
        this.setState({
            age: this.state.age + 1
        })
    }
    render() {
        return (
            <div>
                {/* 箭头函数的方式改变 this 执行 */}
                <button onClick={this.addHandle}>更改数据</button>
                <p>{this.state.age}</p>
            </div>
        )
    }
}

// setState()修改状态方式四
// class 实例方法
class App4 extends React.Component {
    constructor() {
        super()
        this.state = {
            age: 3
        }
    }
    // 利用箭头函数形式的class实例方法
    addHandle = () => {
        this.setState({
            age: this.state.age + 1
        })
    }
    render() {
        return (
            <div>
                <button onClick={this.addHandle}>更改数据</button>
                <p>{this.state.age}</p>
            </div>
        )
    }
}




export default App4